<template>
  <div class="auto">
    <validator name='v'>
      <form class="form-horizontal">
        <div class="form-group">
          <div :class="[$v.f_area.required ? 'has-error' : '']">
            <label for="f_area" class="col-sm-2 control-label ">区/县:</label>
            <div class="col-sm-2">
              <v-select :value.sync="model.f_area" v-model="model.f_area"
                  :options='f_area' placeholder='选择区域'
                  :search='true'
                  :enter-push='true'
                  @change="change(false,true,true)"
              close-on-select></v-select>
            </div>
          </div>
          <label for="f_street" class="col-sm-2 control-label">路段:</label>
          <div class="col-sm-2">
            <v-select :value.sync="model.f_street" v-model="model.f_street"
                :options='f_street' placeholder='选择路段'
                :search='true'
                :enter-push='true'
                @change="change(false,false,true)"
            close-on-select></v-select>
          </div>
          <div :class="[$v.f_area_address.required ? 'has-error' : '']">
            <label for="f_area_address" class="col-sm-2 control-label">街道:</label>
            <div class="col-sm-2">
              <v-select :value.sync="model.f_area_address" v-model="model.f_area_address"
              :search='true'
              :enter-push='true'
              :options='f_area_address' placeholder='选择街道' close-on-select></v-select>
            </div>
          </div>
        </div>
      </form>
    </validator>
  </div>
  <div class="form-horizontal auto" style="margin-top:100px;">
    <div class="form-group">
      <div class="col-sm-offset-10 col-sm-2">
        <button type="button" class="btn btn-success" :disabled='!$v.valid' @click="confirm()" id='userfiles-newAreInf-保存'>
          保存
        </button>
        <button type="button" class="btn btn-default" @click="cancel()" id='userfiles-newAreInf-取消'>
           取消
        </button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import AppData from '../../stores/AppData'
import * as Util from '../Util'
import co from 'co'

let areaGen = function * (self) {
  let data = {}
  data.f_area = self.model.f_area
  data.f_street = self.model.f_street
  data.f_area_address = self.model.f_area_address
  data.type = 'add'
  // 如果数据中有id，不校验小区是否村子
  if (self.model.id) {
    data.id = `${self.model.id}`
    data.type = 'modify'
  } else {
    let tablename = 't_area'
    let condition = 'f_area = ' + "'" + data.f_area + "'" + ' and f_street = ' + "'" + data.f_street + "'" + ' and f_residential_area = ' + "'" + data.f_residential_area + "'"
    let areaRes = yield self.$SqlService.singleTable(tablename, condition)
    if (areaRes.data.length > 0) {
      self.$showAlert('小区已存在, 请重新输入', 'danger', 2000)
      self.model.f_area = ''
      self.model.f_street = ''
      self.model.f_residential_area = ''
      return
    }
  }
  data.f_filiale = Util.f.f_fengongsi
  data.f_outlets = Util.f.f_parentname
  data.f_area_address = self.address
  let msg = '请选择'

  data.f_area = self.model.f_area[0]
  if (!(data.f_area && data.f_area !== '')) {
    msg += '  区/县,'
  }
  data.f_street = self.model.f_street[0]
  if (!(data.f_street && data.f_street !== '')) {
    msg += '  路段,'
  }
  data.f_area_address = self.model.f_area_address[0]
  if (!(data.f_area_address && data.f_area_address !== '')) {
    msg += '  街道,'
  }
  if (msg !== '请选择') {
    self.$showMessage(msg.substring(0, msg.length - 1) + '等参数')
    return
  }
  data.f_operator = Util.f.name // 操作人
  data.f_operate_date = Util.toStandardTimeString() // 操作时间
  // 父表record中插入
  data.f_operat_type = '新建小区'
  data.f_state = '有效'
  data.f_delaypay = 0
  yield self.$post('rs/logic/addandModify', {data:data})
  self.$dispatch('clean')
  self.initModel()
}

export default {
  title: '小区维护',
  data () {
    return {
      model: {
        f_area: '',
        f_street: '',
        f_area_address: ''
      },
      f_area:[],
      f_street: [{label:'',value: ''}],
      f_area_address: [{label:'',value: ''}],
      areas: [],
      sliceArea: []
    }
  },
  props: ['data'],
  ready () {
    if (this.data) {
      this.merge()
    }
    this.change(true)
  },
  watch: {
    'data' (val) {
      if (val) {
        // 初始化区，和片区
        this.areas = []
        this.sliceArea = []
        this.merge()
      } else {
        this.model = {
          f_area: '',
          f_street: '',
          f_area_address: ''
        }
        this.areas = []
        this.sliceArea = []
        this.getArea()
      }
    }
  },
  methods: {
    confirm () {
      let gen = areaGen(this)
      co(gen)
    },
    cancel () {
      this.$dispatch('clean')
    },
    change(flag,param,sign) {
      if (flag) {
        this.$post('rs/sql/params',{data: {key: 'f_area',condition: `1=1`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
        .then((res)=>{
          this.f_area = res.data
        })
      } else {
        if (sign) {
          if (param) {
            this.$post('rs/sql/params',{data: {key: 'f_street',condition: `f_area = '${ this.model.f_area[0]}'`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
            .then((res)=>{
              this.f_street = [...this.f_street, ...res.data]
            })
          } else {
            this.$post( 'rs/sql/params',{data: {key: 'f_area_address',condition: `f_street = '${ this.model.f_street[0]}'`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
            .then((res)=>{
              this.f_area_address = [...this.f_area_address, ...res.data]
            })
          }
        }
      }
    },
    merge () {
      this.model = Object.assign({}, this.model, this.data)
      if (this.model.f_area) {
        this.model.f_area = [this.model.f_area]
      } else {
        this.model.f_area = ''
      }

      if (this.model.f_street) {
        this.model.f_street = [this.model.f_street]
      } else {
        this.model.f_street = ''
      }

      if (this.model.f_area_address) {
        this.model.f_area_address = [this.model.f_area_address]
      } else {
        this.model.f_area_address = ''
      }
    },
    initModel () {
      this.model = {
        f_area: '',
        f_street: '',
        f_area_address: ''
      }
    }
  }
}
</script>
<style lang="less">
  #area-meter {
    padding:5px 30px;
    margin:50px;
    border:4px solid #e8e8e8;
    background: #fff;

    .meter-title {
       display:block;
       width:100px;
       height:30px;
       position:relative;
       top:-15px;
       text-align: center;
       background: white;
     }
  }

</style>
